<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="medium">
            <el-form-item label="账号" prop="account">
                <el-input v-model="form.account" style="width:300px" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" style="width:300px" show-password="true" />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="form.checkPass" style="width:300px" show-password="true" />
            </el-form-item>
            <el-form-item label="员工角色" prop="roleId">
                <el-select v-model="form.roleId" placeholder="请选择该员工当前角色" @focus="getRoleInfo" @blur="checkNull" style="width:300px">
                    <el-option :value="item.roleId" :label="item.roleName" v-for="(item,index) of this.roleList.data" :key="index"/>
                </el-select>
            </el-form-item>
            <el-form-item label="员工工号" prop="workNum">
                <el-input v-model="form.workNum" style="width:300px" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone" maxlength="11" style="width:300px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">注册</el-button>
                <el-button @click="resetFrom('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addManager } from '@/api/manager'
import { getRoleList } from '@/api/user'
export default {
    name: 'addManager_List',
    data() {
        // 对账号输入框的前端验证
        const validateUsername = (rule, value, callback) => {
        console.log(rule,'rule')
        if(value.trim() == '') {
            // .trim()自动过滤用户输入的首尾空白字符
            callback(new Error('输入的用户名不能为空'))
            console.log(callback,'callback')
        } else {
            callback()
        }
        }
        // 密码的校验方法
        const validatePass = (rules, value, callback) => {
            if(value === '') {
                callback(new Error('请输入密码'))
            } else if(value.length < 6 || 20 < value.length ) {
                callback(new Error('密码长度必须大于6位且小于20位'))
            } else {
                if(this.form.checkPass !== '') {
                    this.$refs.form.validateField('checkPass')
                }
                callback()
            }
        }
        const validatePass2 = (rules,value, callback) => {
            if(value === '') {
                callback(new Error('请输入密码'))
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致！'))
            } else {
                callback()
            }
        }
        // 对角色选择框的前端验证
        const validateRoleId = (rule, value, callback) => {
            if(value== '') {
                callback(new Error('请选择该员工当前角色'))
                console.log(callback,'callback')
            } else {
                callback()
            }
        }
        return{
            form: {
                account: '',
                password: '',
                roleId: '',
                workNum: '',
                phone: '',
                checkPass: ''
            },
            // 员工角色下拉列表获取容器
            roleList: {},
            rules: {
                account: [{validator: validateUsername, trigger: 'blur'}],
                password: [{validator: validatePass, trigger: 'blur'}],
                checkPass: [{validator: validatePass2, trigger: 'blur'}],
                roleId: [{validator: validateRoleId, trigger: 'change'}]
            }
        }
    },
    methods: {
    // 获取角色列表函数,当选择器框获得焦点时触发,从服务器调取参数
    async getRoleInfo() {
      try {
        this.roleList = await getRoleList()
      } catch (err) {}
    },
    // 对表单进行重置
    resetFrom(formItem) {
        this.$refs[formItem].resetFields()
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('submit!!')
            this.onSubmit()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 管理员注册
    // 在提交之前再次进行一次判断，当为工艺管理员且工号为空时，会进行提示，且无法提交数据
    async onSubmit() {
        if(this.form.roleId=='1' && this.form.workNum=='') {
            this.$message({
                showClose: true,
                message: '工艺管理员工号不能为空',
                type: 'warning'
            })
        } else {
        let query = {
            account: this.form.account,
            password:  this.form.password,
            roleId: this.form.roleId,
            jobNumber: this.form.workNum,
            phone: this.form.phone
        }
        const data = await addManager(query)
        const errMsg = data.msg
        if(data.code=='1'){
            this.$message({
                showClose: true,
                message: errMsg,
                type: 'success'
            })
        }else{
            this.$message({
                showClose: true,
                message: errMsg,
                type: 'warning'
            })
        }
        }
    },
    // 检查当工艺管理员时，工号不能为空
    checkNull() {
        if(this.form.roleId=='1'){
            if(this.form.workNum==''){
                this.$message({
                    showClose: true,
                    message: '工艺管理员工号不能为空',
                    type: 'warning'
                })
            }else{}
        }else{}
    }
  }
}
</script>

<style>

</style>